<!DOCTYPE html>
<html>

        <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
                <title>barcode_scaner</title>
                <style type="text/css">
                        body {
                                margin: 0px;
                                color: #969896;
                                background: black;
                        }
                        
                        #title {
                                line-height: 44px;
                                height: 44px;
                                text-align: center;
                                border-bottom: 1px solid #1D1F21;
                        }
                        
                        #scanbox {
                                position: fixed;
                                top: 44px;
                                bottom: 200px;
                                width: 100%;
                                background-color: #111;
                                text-align: center;
                        }
                        
                        #scaner {
                                position: absolute;
                                width: 100%;
                                height: 100%;
                        }
                        
                        .footBar {
                                position: fixed;
                                left: 3px;
                                right: 3px;
                                bottom: 3px;
                                height: 192px;
                        }
                        
                        #scanresult {
                                position: absolute;
                                top: 0px;
                                left: 0px;
                                right: 0px;
                                bottom: 42px;
                                border: 1px solid #333;
                        }
                        
                        #buttom {
                                position: absolute;
                                right: 0px;
                                bottom: 0px;
                        }
                        
                        .button {
                                float: right;
                                margin-left: 3px;
                                width: 68px;
                                height: 36px;
                                line-height: 36px;
                                border: 1px solid #333;
                                text-align: center;
                        }
                </style>
                <script type="text/javascript">
                        document.addEventListener( 'plusready', function () {
                                scan = new plus.barcode.Barcode( 'scanner', [ plus.barcode.QR, plus.barcode.EAN8, plus.barcode.EAN13 ], { frameColor: '#00FF00', scanbarColor: '#00FF00' } );
                                scan.onmarked = onmarked;
                                scan.start( { conserve: false, filename: '_doc/barcode/' } );
                        }, false );
                        // 二维码扫描成功(这里可以写扫描成功后的处理方法)
                        function onmarked( type, result, file ) {
                                switch ( type ) {
                                        case plus.barcode.QR:
                                                type = "QR";
                                                break;
                                        case plus.barcode.EAN13:
                                                type = "EAN13";
                                                break;
                                        case plus.barcode.EAN8:
                                                type = "EAN8";
                                                break;
                                        default:
                                                type = "其它" + type;
                                                break;
                                }
                                document.querySelector( "#scanresult" ).innerHTML = result;
                        }
                </script>
        </head>

        <body>
                <div id="title">
                        扫描二维码
                </div>
                <div id="scanbox">
                        <div id="scanner">
                                <div>...加载中...</div>
                        </div>
                </div>
                <div class="footBar">
                        <div id="scanresult" contenteditable="true"></div>
                        <div id="buttom">
                                <div class="button">确认</div>
                                <div class="button">清空</div>
                        </div>
                </div>
        </body>

</html>